<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Professional Word Counter</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #2b5876, #4e4376);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
color: #fff;
}
.container {
width: 100%;
max-width: 800px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 30px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
position: relative;
}
.container::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
transform: rotate(0deg);
z-index: -1;
}
h1 {
text-align: center;
margin-bottom: 30px;
font-weight: 600;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
color: #ffffff;
position: relative;
}
h1::after {
content: '';
display: block;
width: 100px;
height: 4px;
background: linear-gradient(90deg, #4facfe, #00f2fe);
margin: 10px auto;
border-radius: 2px;
}
.input-area {
margin-bottom: 30px;
}
textarea {
width: 100%;
min-height: 250px;
padding: 20px;
border: none;
border-radius: 15px;
background: rgba(0, 0, 0, 0.2);
color: #fff;
font-size: 18px;
resize: vertical;
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
outline: none;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
textarea:focus {
box-shadow: inset 0 2px 15px rgba(0, 0, 0, 0.3), 0 0 0 2px #4facfe;
}
textarea::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.stats {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 30px;
}
.stat-box {
flex: 1;
min-width: 150px;
background: rgba(0, 0, 0, 0.2);
padding: 20px;
border-radius: 15px;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stat-box:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.stat-title {
font-size: 16px;
margin-bottom: 10px;
color: #a0a0a0;
}
.stat-value {
font-size: 32px;
font-weight: 700;
background: linear-gradient(90deg, #4facfe, #00f2fe);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.buttons {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
button {
padding: 12px 25px;
border: none;
border-radius: 50px;
background: linear-gradient(90deg, #4facfe, #00f2fe);
color: white;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
button:active {
transform: translateY(0);
}
.clear-btn {
background: linear-gradient(90deg, #ff758c, #ff7eb3);
}
.footer {
text-align: center;
margin-top: 30px;
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
}
@media (max-width: 600px) {
.stat-box {
min-width: 100%;
}
.buttons {
flex-direction: column;
}
button {
width: 100%;
justify-content: center;
}
}
</style>
</head>
<body>
<div class="container">
<h1><i class="fas fa-font"></i> Professional Word Counter</h1>
<div class="input-area">
<textarea id="text-input" placeholder="Start typing or paste your text here..."></textarea>
</div>
<div class="stats">
<div class="stat-box">
<div class="stat-title">Words</div>
<div id="word-count" class="stat-value">0</div>
</div>
<div class="stat-box">
<div class="stat-title">Characters</div>
<div id="char-count" class="stat-value">0</div>
</div>
<div class="stat-box">
<div class="stat-title">Sentences</div>
<div id="sentence-count" class="stat-value">0</div>
</div>
<div class="stat-box">
<div class="stat-title">Paragraphs</div>
<div id="paragraph-count" class="stat-value">0</div>
</div>
</div>
<div class="buttons">
<button id="copy-btn"><i class="fas fa-copy"></i> Copy Text</button>
<button id="clear-btn" class="clear-btn"><i class="fas fa-trash"></i> Clear Text</button>
</div>
<div class="footer">
<p>Made with <i class="fas fa-heart" style="color: #ff758c;"></i> - Professional Word Counter Tool</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const textInput = document.getElementById('text-input');
const wordCount = document.getElementById('word-count');
const charCount = document.getElementById('char-count');
const sentenceCount = document.getElementById('sentence-count');
const paragraphCount = document.getElementById('paragraph-count');
const copyBtn = document.getElementById('copy-btn');
const clearBtn = document.getElementById('clear-btn');
// Initialize counts
updateCounts();
// Add event listener for input
textInput.addEventListener('input', updateCounts);
// Copy button functionality
copyBtn.addEventListener('click', function() {
textInput.select();
document.execCommand('copy');
// Change button text temporarily
const originalText = copyBtn.innerHTML;
copyBtn.innerHTML = '<i class="fas fa-check"></i> Copied!';
setTimeout(() => {
copyBtn.innerHTML = originalText;
}, 2000);
});
// Clear button functionality
clearBtn.addEventListener('click', function() {
textInput.value = '';
updateCounts();
// Add a little animation to the clear button
clearBtn.innerHTML = '<i class="fas fa-check"></i> Cleared!';
setTimeout(() => {
clearBtn.innerHTML = '<i class="fas fa-trash"></i> Clear Text';
}, 2000);
});
// Function to update all counts
function updateCounts() {
const text = textInput.value;
// Update character count
charCount.textContent = text.length;
// Update word count
const words = text.trim() ? text.trim().split(/\s+/) : [];
wordCount.textContent = words.length;
// Update sentence count
const sentences = text.trim() ? text.split(/[.!?]+/) : [];
sentenceCount.textContent = sentences.length - (text.trim().endsWith('.') || text.trim().endsWith('!') || text.trim().endsWith('?') ? 0 : 1);
// Update paragraph count
const paragraphs = text.trim() ? text.split(/\n+/).filter(p => p.trim().length > 0) : [];
paragraphCount.textContent = paragraphs.length;
}
});
</script>
</body>
</html>
0 टिप्पणियाँ